<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初评</title>
    <link rel="stylesheet" href="../../css/amazeui.css">
    <link rel="stylesheet" href="../../css/weui.css">
    <link rel="stylesheet" type="text/css" href="../../css/jquery.datetimepicker.css" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

</head>
<style>
    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        body,
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #ebecf1;
        }
    
        header {
            text-align: center;
            height: 44px;
            line-height: 44px;
            position: relative;
        }
    
        .button {
            width: 90%;
            margin: 30px auto;
            display: block;
            outline: none;
            background: #1197ff;
            border-radius: 5px;
            height: 40px;
        }
    
        .am-input-group-label {
            background: #fff;
            border: none;
            font-size: 14px;
        }
    
        .am-form-field {
            border: none;
            text-align: right;
            outline: none;
            padding-right: 16px;
        }
        .am-form-field>input[type="file"]{
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        height: 100%;
        opacity: 0;
    }
        .am-input-group {
            position: relative
        }
    
        .weui-picker__action {
            color: #0e90d2;
        }
    
        .am-form-field {
            color: #000;
        }
    
        .xinxiTitle {
            padding: 0px 12px;
            margin-top: 5px;
            height: 38px;
            line-height: 38px;
            background: #fff;
        }
        .xinxibox {
            background: #FFF;
            padding: 10px;
        }
        .xinxiTITLE_2 {
            padding: 0 12px;
            height: 38px;
            line-height: 38px;
            background: transparent;
            margin-bottom: 10px;
        }
        #bianhao{
            font-size: 12px;
            margin-bottom: 5px;
        }
        marquee{
            font-size: 12px;
        }
        .feil{
            color: #1197ff;
        }
    </style>

<body>
    <div class="xinxiTitle " id="bianhao">
        订单编号：加载中
    </div>

    <div class="xinxibox">
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">姓名：</span>
                <div class="am-form-field Name">加载中</div>
            </div>
        </div>
        <div style="border-bottom:1px solid #dadada99;" class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">预约下户开始时间：</span>
                <input class=" am-form-field input time" type="text" name="StartTime" id="datetimepicker" placeholder="请输入日期"
                    onclick="laydate({istime: true,format:'YYYY-MM-DD hh:mm'})">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">预约下户结束时间：</span>
                <input class=" am-form-field input time" type="text" name="EndTime" id="datetimepicker2" placeholder="请输入日期"
                    onclick="laydate({istime: true,format:'YYYY-MM-DD hh:mm'})">
            </div>
        </div>
    </div>
    <marquee style="color:#186fec;">提示：预约下户的时间为3天之内11点~3点</marquee>
    <div class="list_box">
        <div class="am-input-group">
            <span class="am-input-group-label ">上传身份证：</span>
            <div class="am-form-field feil">
                <img src="../../images/xiangji.png" alt="">
                <input srcImg="" name="IdCard" type="file" onchange="ajaxFileUpload(this)" class="Acknowledgement">
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">警告</div>
            <div class="am-modal-bd cont">
                ---
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>

    <button id="am-btn" style="border:none;" class="button asm-btn am-btn-primary">提交</button>

    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/amazeui.js"></script>
    <script src="../../js/ajaxfileupload.js"></script>
    <script src="../../js/jquery.datetimepicker.js"></script>
    <style>
        input[readonly="readonly"] {
            background: #fff !important;
        }
    </style>
    <script>
        $('body').hide()
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
        var myDate = new Date();
        var mm =myDate.getHours();
        $('.time').val(myDate.toLocaleDateString()+' '+mm+':'+myDate.getMinutes()).css('border', 'none')
        $('#datetimepicker').attr('readonly', 'readonly');
        $('#datetimepicker2').attr('readonly', 'readonly');
        $(function () {
            $.ajax({
                url: 'http://haidaiapi.test.zhikewl.com/api/declaration/GetDeclaration?keyValue=' + GetQueryString('id'),
                type: "GET",
                data: {},
                success: function (data) {
                    $('body').show();
                    console.log(JSON.stringify(data))
                    if (data.type == 1) {
                        $('#bianhao').text('订单编号：' + data.resultdata.SerialNumber)
                        $('.Name').text(data.resultdata.Name);
                        if (data.resultdata.CurrentProgressState != 2) {
                            $('.input').eq(0).val(data.resultdata.StartTime.substr(0, 10)+' '+data.resultdata.StartTime.substr(11,5))
                            $('.input').eq(1).val(data.resultdata.EndTime.substr(0, 10)+' '+data.resultdata.EndTime.substr(11,5))
                            $('.Acknowledgement').attr('srcImg', data.resultdata.IdCardUrl)
                            $('.Acknowledgement').parent().find('img').hide();
                            $('.Acknowledgement').parent().text('已上传');
                            $('#am-btn').remove();
                        }
                    }
                },
                error: function (err) {
                    console.log(JSON.stringify(err))
                    $('body').show();
                    $('body').html('出现错误')
                }
            })
            // var http = localStorage.getItem('http')
            // var UserId = localStorage.getItem('UserId')
            // var Access_token = localStorage.getItem('Access_token')
            // var Refresh_token = localStorage.getItem('Refresh_token');
            var name = localStorage.getItem('NAME')

            $('.button').click(function () {
                $('.button').attr('disabled', 'true');
                //限制
                for (var p = 0; p < $('.input').length; p++) {
                    if ($('.input').eq(p)[0].localName == 'input') {
                        if ($('.input').eq(p).val() == '') {
                            var te = $('.input').eq(p).parent().find('span').text()
                            $(".cont").text('请输入' + te.replace('：', ''))
                            $('#my-alert').modal('open')
                            $('.button').removeAttr('disabled')
                            return
                        }
                    } else if ($('.input').eq(p)[0].localName == 'div') {
                        if ($('.input').eq(p).text().length == 205) {
                            var te = $('.input').eq(p).parent().find('span').text()
                            $(".cont").text('请选择' + te.replace('：', ''))
                            $('#my-alert').modal('open')
                            $('.button').removeAttr('disabled')
                            return
                        }
                    }
                }

                for (var i = 0; i < $('input[type="file"]').length; i++) {
                    if ($('input[type="file"]').eq(i).attr('srcImg') == "") {
                        var te = $('input[type="file"]').eq(i).parent().parent().find('span').text()
                        console.log(te)
                        $(".cont").text('请上传' + te.replace('：', ''))
                        $('#my-alert').modal('open')
                        $('.button').removeAttr('disabled')
                        return
                    }
                }

                //开始拼接数据
                var obj = {}
                for (var i = 0; i < $('.input').length; i++) {
                    var Name = $('.input').eq(i).attr('name');
                    if ($('.input').eq(i)[0].localName == 'input') {
                        obj[Name] = $('.input').eq(i).val()
                    } else {
                        obj[Name] = $('.input').eq(i).text()
                    }
                }

                for (var lpl = 0; lpl < $('input[type="radio"]').length; lpl++) {
                    if ($('input[type="radio"]').eq(lpl).prop('checked') == true) {
                        var lpltext = $('input[type="radio"]').eq(lpl).val()
                        var lplname = $('input[type="radio"]').eq(lpl).attr('name')
                        obj[lplname] = lpltext
                    }
                }
                obj['IdCard'] = $('input[type=file]').attr('srcImg')
                console.log(obj);
                $.ajax({
                    url: 'http://haidaiapi.test.zhikewl.com/api/declaration/SaveHandle?keyValue=' + GetQueryString('id'),
                    type: "POST",
                    data: obj,
                    success: function (data) {
                        console.log(JSON.stringify(data))
                        $('.button').removeAttr('disabled')
                        textalert(data.message)
                        if (data.type == 1) {
                            localStorage.setItem('dingdan', 1)
                            window.history.go(-1);
                        }
                    },
                    error: function (err) {
                        console.log(JSON.stringify(err))
                        $('.button').removeAttr('disabled')
                    }
                })
            })
        })

        function ajaxFileUpload(th) {
            $('body').append(`<div style="z-index:99999999999999;top:0;
        left:0;position:fixed;width:100%;height:100%;" class="loidn">
                <div style="width:100%;position:absolute;top:50%;left:0%;text-align:center;transform:translateYs(-50%);">图片上传中...</div>
            
            </div>`)
            var thisclass = $(th).attr('class');
            num = 0;
            $.ajaxFileUpload({
                url: 'http://zhikewl.s1.natapp.cc/UploadImgs/DoUpload', //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: $(th), //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status) //服务器成功响应处理函数
                {
                    console.log(JSON.stringify(data))
                    $('.loidn').remove()
                    textalert(data.Msg)
                    if (data.State == true) {
                        data2 = data;
                        num = 1
                    }
                },
                error: function (data, status, e) //服务器响应失败处理函数
                {
                    $('.loidn').remove()
                    console.log(data);
                }
            })

            var time = setInterval(function () {
                if (num == 1) {
                    $('.' + thisclass).attr('srcImg', data2.Obj)
                    $('.' + thisclass).parent().find('img').hide();
                    console.log($('.' + thisclass).attr('srcImg'));
                    $('.' + thisclass).parent().text('已上传');
                    clearInterval(time)
                }
            }, 1)
            return false;
        }

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        function textalert(text) {
            $('body,html').css('width', '100%').css('height', '100%');
            var dome =
                `<div style="text-align:center;position:absolute;top:50%;transform:translate(-50%,-50%);border-radius: 5px;background: rgba(0,0,0,0.5);padding: 0.2rem;left: 50%;z-index:9999999999999999999999999;" class="mask_boxcontent">
          <p style="color:#fff;margin:0;">${text}</p>
        </div>`
            $('body').append(dome);
            setTimeout(function () {
                $('.mask_boxcontent').fadeOut(500);
                setTimeout(function () {
                    $('.mask_boxcontent').remove();
                }, 500)
            }, 2000)
        }
    </script>
</body>

</html>